<template>
  <div class="navbar">
    <div class='navbarTab' v-for="(item,index) in homeArr" @click="goRouter(index)">
      <div class="tabList">
        <div :class="num === index? `icon${index} active`:`icon${index}`"></div>
        <div class="name">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapActions} from 'Vuex'
  import config from '../../utils/config'
  export default{
    data(){
      return {
        homeArr: config.homeArr,
        num: "",
      }
    },
    methods: {
      ...mapActions({
        _setTitleHide: 'SETTITLEHIDE',
        _setTitleShow: 'SETTITLESHOW',
        _setBarcodeHide: 'SETBARCODEHIDE',
        _setBarcodeShow: 'SETBARCODESHOW',
      }),
      goRouter(index){
        this.num = index;
        if(index !=1) {
          this.$router.push({path: config.homeArr[index].path})
          this._setBarcodeHide()
        }else {
          this._setBarcodeShow()
        }
        if(index === 2) {
          this._setTitleHide()
        }
        if(index === 0) {
          this._setTitleShow()
        }
      }
    },
    computed: {
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/scss" lang="scss" scoped>
  .navbar {
    position: absolute;
    z-index: 1000;
    left: 0;
    bottom: 0;
    height: 55px;
    width: 100%;
    background-color: #fff;
    display: flex;
    border-top: 1px solid rgb(243,243,243);
    .navbarTab {
      flex: 1;
      text-align: center;
      .tabList {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        .name {
          line-height: 25px;
        }
        .icon0 {
          width: 30px;
          height: 25px;
          background: url("../../assets/images/icon_home_normal.png");
          background-size: 100% 100%;
          &.active {
            background: url("../../assets/images/icon_home_press.png");
            background-size: 100% 100%;
          }
        }
        .icon1 {
          position: absolute;
          top: -70%;
          /*margin-left: 30px;*/
          width: 70px;
          height: 70px;
          border-radius: 50%;
          background: #fff url("../../assets/images/icon_qr_code.png") no-repeat center;
          background-size: 60px 60px;
          box-shadow: 0 -1px 2px rgb(255,196,0);
          &.active {
            background: url("../../assets/images/icon_qr_code_shut_down.png") no-repeat center;
            background-size: 60px 60px;
          }
        }
        .icon2 {
          width: 30px;
          height: 25px;
          background: url("../../assets/images/icon_me_normal.png");
          background-size: 100% 100%;
          &.active {
            background: url("../../assets/images/icon_me_press.png");
            background-size: 100% 100%;
          }
        }
      }
    }
  }

</style>
